        * {
            margin: 0;
            padding: 0;
        }
        
        a {
            color: #fff;
            text-decoration: none;
        }
        
        #container {
            /* width: 100vh; */
            height: 100vh;
        }
        
        input:focus::-webkit-input-placeholder {
            color: rgb(177, 210, 233)
        }
        
        .map {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            z-index: -1;
        }
        
        #shan1 {
            width: 250px;
            height: 180px;
            display: inline-block;
            position: relative;
            right: -450px;
            top: 30px;
        }
        
        #shan2 {
            width: 250px;
            height: 180px;
            display: inline-block;
            position: relative;
            right: -500px;
            top: 30px;
        }
        
        #line {
            width: 60%;
            height: 50%;
            position: relative;
            right: -420px;
            top: 30px;
        }
        
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            width: 100%;
            height: 600px;
            background-repeat: no-repeat;
            background-size: cover;
            background-color: black;
            background-image: url(../img/images/10003.png);
            position: relative;
        }
        /* 梯形盒子 */
        
        .nav1 {
            background-image: url(../img/images/10014.png);
            width: 900px;
            height: 60px;
            background-repeat: no-repeat;
            /* padding-left: 800px; */
            margin: auto 400px;
            /* border-top: 1px solid #4567e1; */
        }
        /* 排水管网GIS综合应用系统 */
        
        .nav2 {
            margin-left: 110px;
            font-size: 40px;
            font-weight: bold;
            color: white;
            align-items: center;
        }
        /* 导航栏大盒子 */
        
        .nav {
            /* 弹性盒子，为了让子元素横向排列 */
            display: flex;
            /* top: 300px; */
            position: relative;
            top: -10px;
            text-align: center;
        }
        
        .tubiao {
            width: 160px;
            height: 40px;
        }
        
        .iconfont {
            /* font-size: 30px; */
            color: rgb(205, 238, 251);
        }
        
        #shezhi {
            width: 40px;
            height: 40px;
            line-height: 40px;
            font-size: 20px;
            text-align: center;
            position: absolute;
            top: -30px;
            right: 155px;
        }
        
        #yonghu {
            width: 80px;
            height: 40px;
            line-height: 40px;
            font-size: 20px;
            text-align: center;
            position: absolute;
            top: -30px;
            right: 70px;
        }
        
        #exit {
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            position: absolute;
            top: -30px;
            right: 5px;
            font-size: 15px;
        }
        /* 导航栏各个小盒子 */
        
        .navbar {
            width: 100px;
            height: 40px;
            /* 文本水平居中 */
            text-align: center;
            /* 文本垂直居中 */
            line-height: 40px;
            color: #fff;
            /* background: radial-gradient(rgba(9, 137, 247, 0.7), rgba(9, 137, 247, 0.3)); */
            /* background-color: rgba(9, 137, 247, 0.2); */
            background: radial-gradient(rgba(10, 10, 12, 0.3), rgb(11, 127, 182));
            /* 调整间隔 */
            margin: 5px;
            margin-top: -25px;
            /* 父元素相对定位 */
            /* 子绝父相 */
            position: relative;
            padding: 0px;
            display: block;
        }
        /* 其中一个中间留有空隙 */
        
        .navbar1 {
            width: 100px;
            height: 40px;
            /* 文本水平居中 */
            text-align: center;
            /* 文本垂直居中 */
            line-height: 40px;
            color: #fff;
            /* background: radial-gradient(rgba(9, 137, 247, 0.7), rgba(9, 137, 247, 0.3)); */
            background: radial-gradient(rgba(10, 10, 12, 0.3), rgb(11, 127, 182));
            /* 调整间隔 */
            margin-right: 200px;
            margin-top: -25px;
            /* 父元素相对定位 */
            /* 子绝父相 */
            position: relative;
            /* position: fixed; */
        }
        
        .tri {
            /* 制作三角 */
            width: 0;
            height: 0;
            border: 5px solid #f4b476;
            border-top-color: transparent;
            border-left-color: transparent;
            border-right-color: transparent;
            /* 一条边有颜色其他透明 */
            /* 绝对定位 */
            position: absolute;
            bottom: 0;
            left: 50%;
            /* 利用外边距，让盒子往回走一半 */
            margin-left: -5px;
            margin-bottom: -5px;
            /* margin: -5px;根据这个，让他们都往回走 */
            display: none;
            /* 默认 让其隐藏 */
        }
        /* 伪类选择器：hover */
        /* 控制三角形显示和隐藏 */
        /* ：hover与.tri之间是有一个空格的 */
        
        .navbar:hover .tri {
            display: block;
            /* 让其显示 */
        }
        /* 指南针外边框 */
        
        .compass {
            background-image: url(../img/images/10007.svg);
            width: 100px;
            height: 100px;
            background-repeat: no-repeat;
            background-size: contain;
            position: absolute;
            left: 700px;
            bottom: -115px;
            /* background-image: url(../img/images/10008.svg); */
        }
        /* 指南针内边框 */
        
        .compass1 {
            /* background-image: url(../img/images/10007.svg); */
            width: 100px;
            height: 100px;
            background-image: url(../img/images/10008.svg);
            background-repeat: no-repeat;
            background-size: contain;
            position: absolute;
            left: 700px;
            bottom: -115px;
        }
        
        .tubiaobottom {
            width: 240px;
            height: 40px;
            margin: 0 auto;
            position: absolute;
            left: 675px;
            bottom: -150px;
        }
        
        #sousuo {
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            /* position: absolute;
    top: -30px;
    right: 5px; */
            font-size: 20px;
            background-color: rgb(63, 72, 84);
        }
        
        #jia {
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            /* position: absolute;
    top: -30px;
    right: 5px; */
            font-size: 20px;
            background-color: rgb(63, 72, 84);
        }
        
        #jiahao {
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            /* position: absolute;
    top: -30px;
    right: 5px; */
            font-size: 20px;
            background-color: rgb(63, 72, 84);
        }
        
        .tubiaobottom img {
            width: 25px;
            height: 20px;
            /* position: absolute;
    top: -30px;
    right: 5px; */
        }
        
        #fangzi {
            width: 25px;
            height: 25px;
            line-height: 25px;
            text-align: center;
            /* position: absolute;
    top: -30px;
    right: 5px; */
            font-size: 20px;
            columns: #fff;
            background-color: rgb(63, 72, 84);
        }
        
        #jiantou {
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            /* position: absolute;
    top: -30px;
    right: 5px; */
            font-size: 20px;
            background-color: rgb(63, 72, 84);
        }
        
        .word1 {
            width: 157.1px;
            height: 30px;
            justify-content: space-around;
            align-items: center;
            line-height: 30px;
            padding-left: 10px;
            color: rgb(165, 163, 163);
            position: relative;
            left: 50px;
        }
        
        .box2 {
            width: 1100px;
            height: 610px;
            box-shadow: 0 0 30px 0 rgb(1, 117, 200) inset;
            margin-top: 5px;
            /* display: flex; */
            position: absolute;
            left: 200px;
            z-index: 1;
            background-color: rgba(2, 40, 67, 0.5);
        }
        
        .word2 {
            width: 400px;
            height: 50px;
            color: rgb(202, 216, 223);
            font-size: 10px;
            font-weight: 300;
            display: flex;
            position: absolute;
        }
        
        .word20 {
            width: 50%;
            justify-content: space-around;
            position: relative;
            /* left: 20px; */
            top: 20px;
            /* border: solid 1px rgb(164, 164, 211); */
            text-align: center;
            /* align-items: center; */
        }
        
        .word21 {
            text-align: center;
            justify-content: space-around;
            /* text-align: center; */
            align-items: center;
            /* left: 50px; */
        }
        
        .data {
            color: aqua;
            font-size: 20px;
            font-weight: 600;
            position: relative;
            left: 20px;
        }
        
        .km {
            position: relative;
            left: 20px;
        }
        
        td {
            border: 1px solid transparent;
            text-align: center;
        }
        
        .page {
            width: 380px;
            height: 600px;
            color: rgb(216, 250, 233);
            position: absolute;
            left: 30px;
            top: 10px;
        }
        
        .page .page1 {
            width: 380px;
            height: 250px;
            color: rgb(216, 250, 233);
            /* border: 1px solid #f00; */
            position: relative;
            top: 80px;
            left: 0px;
            font-size: 10px;
            font-weight: 300;
            /* border-color: rgb(0, 114, 199); */
            border: 1px solid rgb(14, 158, 255);
        }
        
        .table0 {
            width: 380px;
            height: 200px;
            /* border: 1px solid rgb(0, 114, 199); */
        }
        
        .page2 {
            width: 380px;
            height: 230px;
            color: rgb(216, 250, 233);
            border: 1px solid rgb(14, 158, 255);
            position: relative;
            top: 100px;
            left: 0px;
            font-size: 10px;
            font-weight: 300;
            /* border-color: rgb(0, 114, 199); */
        }
        
        .table1 {
            width: 380px;
            height: 180px;
            /* border: 1px solid rgb(234, 12, 27); */
        }
        
        .page-item {
            position: relative;
            top: 15px;
            --bs-pagination-color: white;
            --bs-pagination-padding-x: 0.5rem;
            --bs-pagination-padding-y: 0rem;
            --bs-pagination-font-size: 1.0rem;
            --bs-pagination-border-color: #041b2c;
            --bs-pagination-bg: #0d578b;
        }
        
        .page1 tbody:nth-child(2n-1) {
            /* border: 1px solid #f00; */
            background-color: rgba(16, 88, 160, 0.3);
        }
        
        .page1 tbody:nth-child(2n) {
            background-color: rgba(0, 12, 19, 0.3);
        }
        
        .page2 tbody:nth-child(2n-1) {
            /* border: 1px solid #f00; */
            background-color: rgba(16, 88, 160, 0.3);
        }
        
        .page2:nth-child(2n) {
            background-color: rgba(0, 12, 19, 0.3);
        }
        
        .bt {
            width: 370px;
            display: flex;
            justify-content: space-between;
            /* position: relative; */
        }
        
        .bt2 {
            width: 60px;
            height: 30px;
            background-color: rgb(14, 158, 255);
            font-size: 12px;
            font-weight: 500;
            color: rgb(216, 250, 233);
            text-align: center;
            line-height: 30px;
            /* position: absolute; */
            position: relative;
            top: 12px;
        }
        
        .pagination {
            width: 200px;
            height: 30px;
        }
        
        #gwtj {
            box-shadow: 0 0 5px 5px rgb(2, 141, 233) inset;
            background-color: rgba(12, 143, 232, 0.5);
        }
        
        #gwtj .tri {
            display: block;
        }